
<template>
     <div class="property">
    <div class="item_name" :title="`${property.name}(${property.description})`">{{ property.name }}</div>
    <div class="readonly_flag" :class="readonly ? 'readonly_true' : ''">
      <UriProp v-model="stringRef" :readonly="readonly" :defaultValue="defaultValue">
      </UriProp>
    </div>
  </div>
</template>

<script setup lang="ts">
import { createVueDisposer, toReadonlyVueRef, toVR } from 'vue-xe2-plugin/dist-node/components/xe2/tools';
import { onBeforeUnmount } from "vue"
import UriProp from "../commons/UriProp.vue"
import { PropertyCompCallbackFuncParamsType } from "./base";
const props = withDefaults(defineProps<{ property: any}>(), {})
const emits = defineEmits<{
    (e: 'callback', params: PropertyCompCallbackFuncParamsType): void;
}>();

const { property } = props
const readonly = property.readonly
const withUndefined = property.withUndefined
const disposer = createVueDisposer(onBeforeUnmount)
const stringRef = readonly ? toReadonlyVueRef<string | undefined>(disposer, property.reactVar, s => s) : toVR<string | undefined>(disposer, property.reactVar, s => s)
const defaultValue: string | undefined = property.defaultValue

</script>
<style scoped>
.property {
  width: 100%;
  display: flex;
  align-items: center;

}

.item_name {
  width: 70px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    color: rgba(230, 230, 230, 1);
    font-size: 14px;
}

.readonly_flag {
  flex: 1;
}

.readonly_true {
  cursor: not-allowed;
  cursor: no-drop;
}
</style>
